<template>
  <div class="material-volatility-container">
    <!-- 顶部条件筛选 -->
    <div class="screen-conditions-container">
      <ScreenConditions
        :dataType.sync="dataType"
        @checkDataType="checkDataType($event)"
      >
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            v-model="defaultTime"
            :activeDate="activeDate"
            @conditionChange="selectGroupChange($event)"
          ></AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="getData()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="material-volatility-body">
      <router-view ref="routerView"></router-view>
    </div>
  </div>
</template>

<script>
import AssociativeSelectGroup from "@/components/wisdom-beam/cement-app/AssociativeSelectGroup";
import SelectBlock from "@/components/wisdom-beam/cement-app/SelectBlock";
import SelectMixin from "@/components/wisdom-beam/cement-app/SelectMixin";
import SelectProjectName from "@/components/wisdom-beam/cement-app/SelectProjectName";
import SelectCastingParts from "@/components/wisdom-beam/cement-app/SelectCastingParts";
export default {
  name: "labelStatistical",
  components: {
    AssociativeSelectGroup,
    SelectBlock,
    SelectMixin,
    SelectProjectName,
    SelectCastingParts,
  },
  data() {
    return {
      dataType: "statistical",
      dateFormat: "YYYY-MM-DD HH:mm:ss",
      //标段id
      orgCode: "",
      //设备id
      equCode: "",
      //项目名称
      proName: "",
      //浇筑部位
      placePart: "",
      defaultTime: [],
      activeDate: [],
      conditionsData: {},
      clickFlag: false,
      selectMap: [
        //标段
        {
          type: "block",
          mode: "default",
          placeholder: "请选择标段",
        },
        //拌和站
        {
          type: "mixin",
          mode: "default",
          placeholder: "请选择拌和站",
        },
        //工程名称
        {
          type: "engineerName",
          mode: "default",
          placeholder: "请选择工程名称",
        },
        //强度等级
        {
          type: "strength",
          mode: "default",
          placeholder: "请选择强度等级",
        },
        //浇筑部位
        {
          type: "placePart",
          mode: "default",
          placeholder: "请选择浇筑部位",
        },
        {
          type: "calendar",
        },
      ],
    };
  },
  watch: {
    $route(to) {
      let { path } = to;
      let type = "";
      switch (path) {
        case "/nebula/wisdom-beam-app/labelStatistical/dataStatistical":
          type = "statistical";
          break;
        case "/nebula/wisdom-beam-app/labelStatistical/dataReport":
          type = "report";
          break;

        default:
          break;
      }
      !this.clickFlag && this.checkDataType();
      this.clickFlag = false;
      this.dataType = type;
    },
  },
  mounted() {
    let { name } = this.$route;
    switch (name) {
      case "labelDataStatic":
        this.dataType = "statistical";
        break;

      case "labelDataReport":
        this.dataType = "report";
        break;

      default:
        this.dataType = "statistical";
        break;
    }
  },
  methods: {
    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.getData();
    },

    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },

    //查询
    getData() {
      switch (this.dataType) {
        case "statistical":
          this.$refs["routerView"].getChartData();
          break;

        case "report":
          this.$refs["routerView"].getTableData();
          break;

        default:
          break;
      }
    },

    //类型切换
    checkDataType(type) {
      this.clickFlag = true;
      switch (type) {
        case "statistical":
          this.$router.push({
            path: "/nebula/wisdom-beam-app/labelStatistical/dataStatistical",
          });
          break;

        case "report":
          this.$router.push({
            path: "/nebula/wisdom-beam-app/labelStatistical/dataReport",
          });
          break;

        default:
          break;
      }
      this.$nextTick((_) => {
        this.getData();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.material-volatility-container {
  padding: 0 0 10px 10px;
  height: 100%;
  .flex();
  flex-direction: column;
  .material-volatility-body {
    flex: 1;
    overflow: hidden;
    padding: 10px 0 0 0;
  }
}
</style>
